<template>
  <li class="item" @click="handleSelectAddress(index, item)">
    <svg
      class="svg left"
      :style="{
        backgroundColor: currentIndex === index ? '#4cd964' : '#fff',
      }"
      v-if="isMark"
    >
      <use xlink:href="#check-mark" />
    </svg>
    <div class="right">
      <p class="top">
        <span class="name">{{ item.name }}</span>
        <span v-show="item.sex === 1" class="appellation">先生</span>
        <span v-show="item.sex === 2" class="appellation">女士</span>
        <span>{{ item.phone }}</span>
      </p>
      <p class="bottom">
        <span class="tag">{{ item.tag }}</span>
        <span class="address-detail">{{ item.address_detail }}</span>
      </p>
    </div>
  </li>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    isMark: {
      type: Boolean,
      default: false,
    },
    item: {
      type: Object,
      default() {
        return {};
      },
    },
    index: {
      type: Number,
      default: 0,
    },
    currentIndex: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    handleSelectAddress(index, item) {
      this.$emit("editCurrentIndex", index);
      this.$bus.$emit("handleSelectAddress", item);
    },
  },
};
</script>
<style lang="less" scoped>
.item {
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eaeaea;
  .svg {
    width: 20px;
    height: 20px;
    padding: 2px;
    border-radius: 50%;
    margin-right: 10px;
  }
  .right {
    flex: 1;
    .top {
      .name {
        font-weight: 700;
        font-size: 18px;
      }
      .appellation {
        margin: 0 10px 0 5px;
      }
    }
    .bottom {
      margin-top: 5px;
      .tag {
        padding: 3px;
        border-radius: 3px;
        margin-right: 5px;
        background-color: #ff5722;
        font-weight: 700;
        font-size: 10px;
        color: #fff;
      }
      .address-detail {
        font-size: 12px;
        color: #777777;
      }
    }
  }
}
</style>